<template>
  <!--字段-->
  <nf-grid-slot
    v-bind="gridMeta"
    :dataList="list"
    :selection="selection"
    size="small"
  >
    <template #controlTypeId="scope">
      <div @click.stop="(e) => {}">
      <component
        :is="formItemKey[164]"
        v-model="model[scope.row.columnId]"
        v-bind="kindMeta"
      >
      </component>
      </div>
    </template>
  </nf-grid-slot>
</template>

<script lang="ts">
  import { defineComponent, reactive, watch } from 'vue'
  import { nfGridSlot, formItemKey } from '@naturefw/ui-elp'
  import { getMetaDataState } from '../../../../lib-excel/main'

  import _gridMeta from './json/grid-column.json'
  import _kindMeta from './json/ctrl-kind.json'

  type IModel = {
    [key: string | number]: Array<number>
  }
  export default defineComponent({
    name: 'nf-xls-sheet',
    components: {
      nfGridSlot
    },
    props: {
    },
    setup(props, context) {
      // 字段列表的 meta
      const gridMeta = reactive(_gridMeta)
      // 字段 集合
      const list: Array<any> = reactive([])

      // 控件类型 的备选的 meta
      const kindMeta = reactive(_kindMeta)
      // 控件类型 的值
      const model:IModel = reactive({})
      // 状态
      const state = getMetaDataState()
      const { tables, current } = state

      // 列表的选择
      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })
      // 换表，换字段
      watch(() => current.table.tableID, (id) => {
        if (tables[id]) {
          // 设置控件类型的值
          tables[id].cols.forEach((col) => {
            const kind = col.controlTypeId
            const arr = [1, kind]
            arr[0] = Math.floor(kind / 10)
            model[col.columnId] = arr
          })

          list.length = 0
          list.push(...tables[id].cols)
        }
      })

      // 监听控件类型的变化
      watch(model, () => {
        let i = 0
        for (const key in model) {
          const kind = model[key]
          if (tables[current.table.tableID]?.cols[i]?.controlTypeId) {
            tables[current.table.tableID].cols[i].controlTypeId = kind[1]
          } else {
            console.log(tables[current.table.tableID].cols[i])
          }
          i++
        }
      })

      // 监听选择的表，设置字段
      watch(selection, () => {
        // state.current.cols = selection.row
        if (selection.dataId !== '') {
          state.current.table.cols.length = 0
          state.current.table.cols.push(...selection.rows)
        }
      })

      return {
        // 控件类型
        model,
        kindMeta,
        formItemKey,
        // 列表
        selection,
        gridMeta,
        list,
        current
      }
    }
  })
</script>